<template>
  <svg class="zui-icon" aria-hidden="true">
    <use :xlink:href="`#${icon}`"></use>
  </svg>
</template>

<script>
import './#symbol'
export default {
  name: 'z-icon',
  props: {
    icon: String
  }
}
</script>

<style lang="less">
.zui-icon {
  flex: none;
  display: inline-flex;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: center;
  // vertical-align: -0.15em;
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
  font-size: 24px;
  line-height: 1;
}
</style>
